<script setup>
import {reactive} from "vue";
import axios from "axios";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";

//表格数据
let info = reactive({
  list:[],
  pageNum:1,
  pageSize:3,
  pages:0,
  total:0,
// 表格内数据
  sel:{

  },
//   开启对话框
  dialogVisible:false,
//   操作是否成功
  success :false,
//   是否在添加
  isAdd:false,
})
// 获取数据
const queryAll = () => {
  // http://localhost:8080
  uu.get("/TestController/pagingList",{
    params:{
      // 设么都没有，默认全查
      pageNum:info.pageNum,
      pageSize:info.pageSize,
      pages:info.pages,
      title:info.sel.title,
      author:info.sel.author,
      start: info.sel.start,
      end: info.sel.end,
    }
  }).then(result =>{
    info.list = result.list;
    info.pageNum = result.pageNum;
    info.pageSize = result.pageSize;
    info.total = result.total;
    console.log(result.list);
    console.log(result);
  })
}
// 查询
queryAll()

// 改变页数
const pagesChange = (value) => {
  // alert(value)
 //  console.log(value)
 info.pages = value;
  queryAll();
}
// 上下页
const pageNumChange = (value) => {
  // alert(value)
  console.log(value)
  info.pageNum = value;
  queryAll();
}

// 删除
const handleDelete = (id) => {
  // alert(id)
  uu.delete("/TestController/del/"+id).then(result =>{
    // alert(result.message)
    if (result.ok){
      info.success = true; // 显示成功提示
      ElMessage({
        message:result.message,
        type:"success",
      })
      queryAll()
    }else {
      ElMessage.error(result.message)// 显示失败提示
    }
    // alert(info.success)
  })
}

// 开启对话框
const dialogBox = (isAdd,id) => {
  info.dialogVisible = true;
  if (isAdd === false){
    // 根据id获取用户数据
    uu.get("/TestController/get/"+id).then(result =>{
       info.sel = result;
    })
  }
  // 将值传递到视图，然后视图判断要显示那些文字， 以及提交时调用那个方法。
  info.isAdd = isAdd;
}

// 添加
const save = () => {
 uu.post("/TestController/save",info.sel).then(result =>{
   if (result.ok){
     info.dialogVisible= false; // 关闭添加页面
   //   需要补上 增加成功的提示
     ElMessage({
       message:result.message,
       type:"success",
     })
   }else {
     ElMessage.error(result.message)
   }
   info.sel = {} // 清楚已有缓存，因为其他区域也在使用该对象数据。
 })
}

//  修改
const handleEdit = () => {
    uu.put("/TestController/update/",info.sel).then(result =>{
      // info.success = result.ok;
      if (result.ok){
        ElMessage({
          message:result.message,
          type:"success"
        })
      //   清除缓存
        info.sel = {}
      //   刷新页面
        queryAll()
      //   关闭对话框
        info.dialogVisible = false;
      }else {
        ElMessage.error(result.message)
      }
    })

}
// 关闭对话框并清除数据
const handleClose = () => {
  info.sel={}; // 清除数据
  info.dialogVisible=false // 关闭对话框
}
</script>

<template>
<!-- 添加与修改区域 -->
  <el-button type="primary" @click="dialogBox(true)">添加</el-button>
  <br><br>
  <!--对话框-->
  <el-dialog
      v-model="info.dialogVisible"
      :title="info.isAdd?'添加文章':'编辑文章'"
      width="40%"
      :before-close="handleClose"
      draggable
  >
    <el-form :model="info.sel" label-width="120px">

      <el-form-item label="标题">
        <el-input v-model="info.sel.title" style="width: 80%" />
      </el-form-item>

      <el-form-item label="作者">
        <el-input v-model="info.sel.author" style="width: 80%"/>
      </el-form-item>


      <el-form-item label="审阅状态">
        <el-radio-group v-model="info.sel.checkState">
          <el-radio :label="1"> 已审阅 </el-radio>
          <el-radio :label="-1">尚未审阅</el-radio>
        </el-radio-group>
      </el-form-item>
<!---->
      <el-form-item label="是否热点">
        <el-radio-group v-model="info.sel.isHotspot">
          <el-radio :label="1"> 热点 </el-radio>
          <el-radio :label="-1">非热点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="info.sel.issueDate"
            type="date"
            placeholder="Pick a day"
            :size="size"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
            type="primary"
            @click="info.isAdd?save():handleEdit()"
            :plain="true"
        >
         保存文章
        </el-button>
      </span>
    </template>

  </el-dialog>
<!-- 便捷查询区域 -->
  <el-form :inline="true" :model="info.sel" class="demo-form-inline">
    <el-form-item label="标题">
      <el-input v-model="info.sel.title" placeholder="模糊查询" clearable />
    </el-form-item>
    <el-form-item label="姓名">
      <el-input v-model="info.sel.author" placeholder="模糊查询" clearable />
    </el-form-item>
    <el-form-item label="起始时间">
      <el-date-picker
          v-model="info.sel.start"
          type="date"
          placeholder="请选择起始时间"
          clearable
      />
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
          v-model="info.sel.end"
          type="date"
          placeholder="请选择结束时间"
          clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryAll()">Query</el-button>
    </el-form-item>
  </el-form>
<!-- 表格 -->
  <el-table :data="info.list" border style="width: 100% ">
    <el-table-column label="序号" type="index" width="100px"/>
    <el-table-column label="标题" prop="title" />
    <el-table-column label="作者" prop="author" />
    <el-table-column label="是否审阅" prop="checkState" >
      <template #default="scope">
        <el-tag class="ml-2" type="success" v-if="scope.row.checkState === 1">审阅完成</el-tag>
        <el-tag class="ml-2" type="warning" v-else-if="scope.row.checkState === -1">审阅失败</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="是否热点" prop="isHotspot" >
      <template #default="scope">
        <el-tag class="ml-2" type="success" v-if="scope.row.isHotspot === 1">热点</el-tag>
        <el-tag class="ml-2" type="warning" v-else-if="scope.row.isHotspot === -1">非热点</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="发表日期" prop="issueDate" />
    <el-table-column label="操作">
      <template #default="scope" >
<!--    点击开启对话框    -->
        <el-button
            size="small"
            type="warning"
            @click="dialogBox(false,scope.row.id)"
        >修改
        </el-button>
          <el-popconfirm @confirm="handleDelete( scope.row.id)" title="你确定要删除吗？" >
            <template #reference>
              <el-button
                  size="small"
                  type="danger"
                  :plain="true"
                  >
                Delete</el-button>
            </template>
          </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
<!-- 分页 -->
  <div>
    <br>
    <el-pagination
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="disabled"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="pagesChange($event)"
        @current-change="pagesChange($event)"
    />
  </div>
</template>

<style scoped>

</style>